<template>
	<view class="page">
		<Update v-if="updatePopup" :versionInfo="versionInfo"></Update>
		<view class="shopping-cart">
			<text>购物车</text>
		</view>
		<!-- <view style="height: 100rpx;"></view> -->
		
		<view v-if='myCartList.length==0'>
			<image src="/static/img/carpicNothing.png" class="nothing"></image>
			<text class="cart-content">购物车空空如也</text>
			<view class="goShopping" @click="tobuy">
				<text>去选购</text>
			</view>
		</view>
	
		<view class="order-list">
			<view class="order-list-item" v-for="(item,index) in myCartList" :key="index">
				<view class="circle" @click="isChecked(item,index)">
					<view class="check" v-show='item.checked==1'></view>
				</view>
				<image :src="item.bizpro_imgurl" class="goods" @click="toDetail"></image>
				<view class="goods-info">
					<text class="name">{{item.bizpro_name}}</text>
					<view class="tag">
						<text class="tag-one" v-for="(lb,i) in item.bizpro_label" :key='i' v-if="i<2">{{lb}}</text>
						<!-- <text class="tag-one">{{item.bizpro_label[0]}}</text>
						<text class="tag-two">{{item.bizpro_label[1]}}</text> -->
					</view>
					<text class="size" v-if>{{item.bizpro_spec_value1}}.{{item.bizpro_spec_value2}}</text>
					<text class="price">¥ {{item.bizpro_saleprice}}</text>
					<!-- <text class="original-price">原价{{item.bizpro_oldprice}}</text> -->
				</view>
					<view class="number">
						<text @click="reduce(item,index)" :class="item.buy_num === 1?'no-click':''">-</text>
						<text style="border-left: none; border-right: none;">{{item.buy_num}}</text>
						<text @click="add(item,index)">+</text>
					</view>
			</view>
		</view>
		<view class="bottom" v-if='myCartList.length!=0 '>
		<!-- <view class="bottom" v-if='!tocar'> -->
			<view class="all-checked-wrap" @click="allChecked">
				<view class="all-checked" v-if="isAllChecked"></view>
			</view>
			<text class="select-all-text">全选</text>
			<text class="total-price">¥{{total_price}}</text>
			<!--未授权的时候展示  -->
				<view :class="[!grep?'confirm-pay':'confirm-paygrep']" @click="confirmPay" >
					<text>确认支付</text>
				</view>
		</view>
		<Authority v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='authorityFun'></Authority>
	</view>
	
</template>

<script>
	import {
		request
	} from '@/request/index.js';
	import Authority from '@/components/authorityPopup.vue'
	import Update from '@/components/Update';
	export default {
		onShow: function(options) {
			//获取强制更新缓存
			this.fore();
			var _token = uni.getStorageSync('token')
			if(_token==null||_token==''){
				//微信登录授权
				this.toWxLogin()
			 }else{
				 this.showAuthority = false;
				 
			 }
			 var _memberinfo = uni.getStorageSync('member')
			 console.log(_memberinfo,'-----------------_memberinfo')
			 if(_memberinfo!=null&&_memberinfo!=''&&_memberinfo!= undefined&&JSON.stringify(_memberinfo) != "{}" ){
				 if(_memberinfo.phone==null||_memberinfo.phone==''||typeof(_memberinfo.phone)=='undefined'){
					 this.myCartList.length=0 
					 //去注册 
					 uni.showToast({
						title:'您尚未注册，正在前往注册！' ,	
						icon:'none',
						duration:1000
					 })
					 setTimeout(function(){
						
						//跳转到注册页
						uni.navigateTo({
							url: '/pages/register/Register'
						})
					 },1000)
					 return
				 				 
				 }else{
				 	this.getMyCartList();
				 }
			 }
			
		
		},
		components: {
			Authority,
			Update,
		},
		data() {
			return {
				isAllChecked: false,
				cart: [],
				myCartList: [],
				id: '',
				total_price: 0,
				shopCarIdArray: [],
				cartChecked:0,
				grep:true,//是否有购物车id状态
				showAuthority:false,//微信授权状态
				updatePopup:false,
				// login:false
			}
		},
		methods: {
			
			//强制更新缓存
			fore(){
				var that = this
				let version = uni.getStorageSync('fore')
				console.log(uni.getStorageSync('fore'),'强制更新缓存开始')
				if(version.status == 1){
					//status= 1 说明更新 返回数据
					that.updatePopup = true;
					that.versionInfo = uni.getStorageSync('fore')
				}else{
					//删除缓存
					uni.removeStorageSync("fore")
					this.updatePopup = false;
				}
			},
			toDownload(){
				
				uni.navigateTo({
					url:'/pages/download/download?url='+this.versionInfo.url+'&note='+this.versionInfo.note+'&version='+this.versionInfo.version+'&size='+this.versionInfo.size+'&update_time='+this.versionInfo.update_time
				})
			},
			
			closeUpdatePopup() {
				//删除缓存
				uni.removeStorageSync("fore")
				this.updatePopup = false;
				
			},
			/* ------------------强制更新缓存结束---------------------- */
			
			
			tobuy(){
				uni.switchTab({
					url:'/pages/category/Category'
				})
			},
			isChecked(item, index) {
				if (item.checked == 1) {
				
					item.checked = 2
					//确认支付变成灰色
					this.grep=true
					this.total_price = (parseFloat(this.total_price) - parseFloat(item.buy_num * item.bizpro_saleprice)).toFixed(2)
					//1是选中  2是未选中   把1改成2  对应的 删除这个shopcarId数组里里  减少
					this.shopCarIdArray.forEach((res, key) => {
						//遍历的id 与购物车id是否相同  相同删除
						if (item.id == res) {
							this.shopCarIdArray.splice(key, 1);
						}
						
					})
				} else {
					//确认支付变成黄色
					this.grep=false
					item.checked = 1
					this.total_price = (parseFloat(this.total_price) + parseFloat(item.buy_num * item.bizpro_saleprice)).toFixed(2)
					//把这个id加数组里 追加
					this.shopCarIdArray.splice(-1, 0, item.id)
					
				}

				this.$forceUpdate()
			},
			reduce(item, index) {
				if (item.buy_num > 1) {
					item.buy_num--;

					this.$api.cartSave({
							bizpro_id: item.bizpro_id,
							buy_num: item.buy_num,
							standard_value1: item.bizpro_spec_value1,
							standard_value2: item.bizpro_spec_value2
						})
						.then(res => {
							if (item.checked == 1) {
								this.total_price = (parseFloat(this.total_price) - parseFloat(item.bizpro_saleprice)).toFixed(2)
							}

						})
						.catch(res => {

						})

				} else if (item.buy_num == 1) {
					//删除购物车的s商品
					this.$api.cartDelete({
							id: item.id
						})
						.then(res => {
						
							uni.showToast({
								title: '删除成功',
							})
							this.getMyCartList()
						})
				}
			},
			add(item, index) {
				item.buy_num++;
				this.$api.cartSave({
						bizpro_id: item.bizpro_id,
						buy_num: item.buy_num,
						standard_value1: item.bizpro_spec_value1,
						standard_value2: item.bizpro_spec_value2
					})
					.then(res => {
						if (item.checked == 1) {
							this.total_price = (parseFloat(this.total_price) + parseFloat(item.bizpro_saleprice)).toFixed(2)
						}

					})
					.catch(res => {

					})
			},
			//全选
			allChecked() {
				this.isAllChecked = !this.isAllChecked;
				let mark = this.isAllChecked ? 1 : 2
				let countPirce = 0;
				this.myCartList.forEach((res, key) => {
					res.checked = mark
					countPirce += parseFloat(res.buy_num * res.bizpro_saleprice)
					//判断  购物车id 是否为空  空的话  直接 追加数组  反之 遍历
					if (this.shopCarIdArray == '') {
						this.shopCarIdArray.splice(-1, 0, res.id);
					} else {
						if (mark == 1) {
							//先看数组里是否有这个购物车id 没有则追加
							this.shopCarIdArray.forEach((item, key) => {
								//遍历的id 与购物车id是否相同  相同不追加  不相同追加
								if (res.id != item) {
									this.shopCarIdArray.splice(-1, 0, res.id);
								}
							})
						} else {
							this.shopCarIdArray.forEach((s, key) => {
								//遍历的id 与购物车id是否相同  相同删除
								if (res.id == s) {
									this.shopCarIdArray.splice(key, 1);
								}
							})
						}
					}

				})
				if (this.isAllChecked) {
					//false  是可以点击全选
					this.grep = false
					
					this.total_price = countPirce.toFixed(2)
				} else {
					this.grep = true
					this.total_price = parseFloat(0).toFixed(2)
				}
				//获取所有购物车id  添加数组
				this.$forceUpdate()
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/goods/GoodsDetail'
				})
			},
			// 获取我的购物车列表
			getMyCartList() {
				console.log('---购物车')
				this.$api.getMyCartList({}).then(res => {
					this.myCartList = res.data.data;
					
					let countPirce = 0;
					this.myCartList.forEach((item, index) => {
						if (item.checked == 1) {
							countPirce += parseFloat(item.buy_num * item.bizpro_saleprice)
						}
					})
					this.total_price = countPirce.toFixed(2)
					// console.log(res);
				})
			},
			//微信授权登录 跳转页面
			toWxLogin(){
				//获取信息存缓存
				var t=this;
			
				var _member = uni.getStorageSync("member")
				console.log(_member)
				if(_member!=''&&_member!=null){
					console.log(_member)
				}else{
					console.log(t.getmemberInfo,'没有用户缓存')
					console.log("App微信拉起授权"); 
					this.showAuthority = true;
					//电脑上调试 改为 false
					// this.showAuthority = false;
				}
				
			},
			//点击确认支付
			confirmPay() {
				var total_num = this.shopCarIdArray.length; //6 
				//先判断 是否微信授权了 没有则 弹出微信授权

				this.$api.getCheckOrder({shopcarId:this.shopCarIdArray,total_num:total_num}).then(res => {
					this.order_id = res.data.orderId;

					uni.navigateTo({
						url: '/pages/order/OrderConfirm?order_id=' + this.order_id
					})
				})
			},
			//打开授权弹框
			openAuthority(){
			
				this.showAuthority = true
			},
			//关闭授权弹框
			closeAuthority(){
				
				this.showAuthority = false;
				/* uni.switchTab({
					url:'/pages/index/index'
				})
				 */
			},
			
			// 执行授权方法
			authorityFun(){
			
				var that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.showLoading({
								title:'授权中'
							})
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											uni.hideLoading();
											console.log("App微信获取用户信息成功", infoRes.userInfo);
											that.showAuthority = false
											
											
											console.log(infoRes.userInfo.unionId,'登录unionId')
											//在这请求获取用户信息的接口 手机号 有返回值存member 没有 则存 微信返回的
											that.$api.getUnidMember({openId_app:infoRes.userInfo.openId,unionid:infoRes.userInfo.unionId}).then(res => {
												console.log(res)
												console.log(res.data)
												console.log(res.data.phone,'授权获取用户手机号')
												console.log(res.data.minfo,'状态')
												if(res.data.status == true){
													if(res.data.minfo == true){
														if(res.data.data.phone==null||res.data.data.phone==''||typeof(res.data.data.phone)=='undefined'){
															//注册页
															uni.navigateTo({
																url:'/pages/register/Register'
															}) 
														}else{
															//数据库中的 可能有phone 也能 没有 但一定有 头像 昵称 unionid
															uni.setStorage({
																key: "member",
																data: res.data.data
															})
															uni.setStorage({
																key: "token",
																data: res.data.data.token
															})
															//首页 有手机号跳首页
															uni.switchTab({
																url:'/pages/index/index'
															})
														}
													}else{
														//微信返回的 没有phone
														uni.setStorage({
															key: "member",
															data: infoRes.userInfo
														})
														//注册
														uni.navigateTo({
															url:'/pages/register/Register'
														}) 
													}
													
												}
											
														
												
											})
										
										
											
										}
									});
								
								},
								fail: function(res) {
									console.log("App微信获取用户信息失败", res);
								}
							})
						}
					}
				});
			},	
		}
	}
</script>

<style>
	.page {
		/* padding-top: calc(var(--status-bar-height)); */
		width: 100%;
		height: 100vh;
		display: table;
		background-color: #f7f7f7;
	}
	.shopping-cart {
		position: fixed;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: calc(100rpx + var(--status-bar-height)) ;
		background: #fff;
		/* padding-top: calc(var(--status-bar-height)); */
	}
	.shopping-cart text{
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		position: absolute;
		bottom: 20rpx;
	}
	.order-list {
		width: 750rpx;
		/* margin-top: 50rpx; */
		margin-bottom: 130rpx;
		margin-top: calc(130rpx + var(--status-bar-height));
	}

	.order-list-item {
		display: flex;
		width: 750rpx;
		height: 218rpx;
		overflow: auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 1);
		margin-top: 20rpx;
		position: relative;
	}
	.order-list-item:last-child{
		margin-bottom: 30rpx;
	}
	.circle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204, 204, 204, 1);
		border-radius: 50%;
		margin-left: 20rpx;
		margin-top: 94rpx;
	}

	.check {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254, 177, 71, 1);
		border-radius: 50%;
	}

	.goods {
		width: 160rpx;
		height: 160rpx;
		margin-left: 30rpx;
		margin-top: 29rpx;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		width: 450rpx;
	}

	.name {
		width: 420rpx;
		display: block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
		margin-top: 25rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.tag {
		display: flex;
		margin-left: 30rpx;
	}

	.tag-one,
	.tag-two {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		width: auto;
		height: 28rpx;
		padding:0px 6px;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
		margin-right:6px;
	}

	.tag-two {
		margin-left: 30rpx;
	}

	.price {
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
		margin-left: 30rpx;
		margin-top: 0rpx;
	}

	.original-price {
		display: block;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through;
		margin-left: 30rpx;
	}

	.size {
		display: block;
		font-size: 22rpx;
		width: 250rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 30rpx;
		margin-top: 10rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.number {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.number text {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 62rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
		margin-top: 28rpx;
	}
	.number text:nth-child(2) {
		font-size: 30rpx;
	}
	.number text:last-child {
		border-radius:0 10rpx 10rpx 0;
	}
	.bottom {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 112rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid #eee;
	}

	.all-checked-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204, 204, 204, 1);
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.all-checked {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254, 177, 71, 1);
		border-radius: 50%;
	}

	.select-all-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: rgba(153, 153, 153, 1);
		font-weight: 500;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.total-price {
		position: absolute;
		right: 400rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 77, 77, 1);
		margin-left: 95rpx;
	}

	.confirm-pay {
		position: absolute;
		right: 20rpx;
		width: 324rpx;
		height: 70rpx;
		border-radius: 6rpx;
		background: rgba(253, 149, 47, 1);
		
	}
	.confirm-paygrep {
		position: absolute;
		right: 20rpx;
		width: 324rpx;
		height: 70rpx;
		border-radius: 6rpx;
		background: #d5d5d6;
	}
	.confirm-paygrep text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-left: 103rpx;
		}
	.confirm-pay text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-left: 103rpx;
	}

	.no-click {
		color: #ccc;
		border-radius: 10rpx 0 0 10rpx;
	}
	.nothing {
		display: block;
		width: 598rpx;
		height: 480rpx;
		margin-left: 76rpx;
		margin-top: 322rpx;
	}
	.cart-content {
		display: block;
		height: 36rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		line-height: 36rpx;
		margin-top: 40rpx;
		margin-left: 243rpx;
	}
	.goShopping {
		width: 324rpx;
		height: 70rpx;
		line-height: 60rpx;
		background: rgba(254,177,71,1);
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(179,179,179,0.45);
		border-radius: 6rpx;
		margin-top: 120rpx;
		margin-left: 213rpx;
	}
	.goShopping text {
		width: 87rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
		line-height: 36rpx;
		margin-left: 118rpx;
	}
</style>
